<template>
	<view class="container">
		<image src="/static/games/idiom/bg.jpg" mode="aspectFill"></image>
		<view class="flex_col">
			<view class="content_box">
				<view class="padding-tb-sm text-white text-center">请在{{duration}}秒内完成</view>
				<view class="img_box bg-blue">
					<image :src="idiom.photo" mode="aspectFill"></image>
					<view class="btn flex_col flex_space" style="display: none;">
						<view class="cu-btn bg-white" @tap="resetPicker">重 来</view>
						<view class="cu-btn bg-white" @tap="share" style="display: none;">分 享</view>
					</view>
				</view>
				<view class="flex_col flex_space selected_box">
					<view v-for="(item,index) in selected" class="item" :key="index" :data-index="index" @tap="cancelPicker">{{item.txt}}</view>
				</view>
				<view class="select_box flex_col flex_wrap">
					<view v-for="(item,index) in selectList" :key="index">
						<view class="bg-blue" :data-index="index" @tap="picker">{{item}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idiom:[],
				passIndex:0,
				selected:[{},{},{},{}],
				selectList:[],
				correctCount:0,
				errorCount:0,
				duration:60,
				idiom_correct:0,
				flag: !0,
			}
		},
		mounted() {
			this.loadData();
		},
		onUnload(){
			// 页面关闭移除计时器，否则app平台有BUG
			clearTimeout(this.aTime);
			clearInterval(this.bTime);
			clearInterval(this.cTime);
		},
		methods: {
			loadData: function() {
				let that = this;
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['type='+'idiom_correct','timestamp='+timestamp]);
				this.helper.req({
					api:"getRewardSet",
					timestamp:timestamp,
					data:{type:'idiom_correct'},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.idiom_correct = parseInt(res.data.data.reward);
					let msg = "在"+this.duration+"秒内答对"+this.idiom_correct+"个成语即可获取奖励哦，是否开始？";
					uni.showModal({
						title: "提示",
						content: msg,
						showCancel: !0,
						confirmText: "开始",
						success:function(res){
							if(res.confirm){
								clearTimeout(that.aTime);
								clearInterval(that.bTime);
								clearInterval(that.cTime);
								
								that.setPassInfo();
								that.downTime();
							}else{
								uni.navigateBack();
							}
						}
					})
				})
			},
			
			/* 设置关卡信息 */
			setPassInfo(){
				this.getRandIdiom();
			},
			setInfo(){
				/* 初始化默认已选择列表 */
				let info=this.idiom.randchar;
				info=info.split("").sort(()=>{
					/* 随机打乱 */
					return Math.random()>.5 ? -1 : 1;
				});
				
				let info_selected=this.idiom.selected;
				info_selected=info_selected.split("");
				
				let selectedArr=[];
				for(let i=0;i<4;i++){
					selectedArr.push({
						txt:info_selected[i],
						index:i
					})
				}
				this.selected=selectedArr;
				this.selectList=info;
			},
			getRandIdiom:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['timestamp='+timestamp]);
				this.helper.req({
					api:"getRandIdiom",
					timestamp:timestamp,
					data:{},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.idiom = res.data.data.idiom;
					this.setInfo();
					uni.hideLoading();
				})
			},
			/* 下一关 */
			nextPass(){
				// if((this.list.length-1)<=this.passIndex){
				// 	uni.showToast({
				// 		title: '恭喜已通关',
				// 		icon:'success',
				// 		duration: 2000
				// 	});
				// }else{
					this.passIndex++;
					this.setPassInfo();
				// }
			},
			/* 选择 */
			picker(e){
				let index=Number(e.currentTarget.dataset.index);
				if(this.selectList[index]){
					for(let i=0;i<this.selected.length;i++){
						if(this.selected[i].txt == ' ' || this.selected[i].txt == ''){
							this.$set(this.selected,i,{
								txt:this.selectList[index],
								index
							});
							this.$set(this.selectList,index,'');
							this.$nextTick(()=>{
								this.verify();
							});
							break;
						}
					}
				}
			},
			/* 答案校验 */
			verify(){
				let answer = this.idiom.answer;
				let content = this.idiom.content
				if(this.findIndex()<0){
					uni.showModal({
						title:answer,
						content:`[释义]:${content}`,
						showCancel:false,
						confirmText:"下一关",
						success:()=>{
							this.nextPass();
						}
					})
					this.correctCount = this.correctCount + 1;
				}else{
					uni.showModal({
						title:'回答错误，正确答案: '+answer,
						content:`[释义]:${content}`,
						showCancel:false,
						confirmText:"下一关",
						success:()=>{
							this.nextPass();
						}
					})
					
					this.errorCount = this.errorCount + 1;
				}
			},
			/* 查找错误位置 */
			findIndex(){
				let result=this.idiom.answer;
				let index=-1;
				for(let i=0;i<this.selected.length;i++){
					if(this.selected[i].txt!=result.charAt(i)){
						index=i;
						break;
					}
				}
				return index;
			},
			/* 重新选择 */
			resetPicker(){
				let selectedArr=[];
				this.selected.forEach((item,index)=>{
					if(item.index>=0){
						this.$set(this.selectList,item.index,item.txt);
					}
					selectedArr.push({
						txt:'',
						index:-1
					});
				});
				this.selected=selectedArr;
			},
			/* 取消选择 */
			cancelPicker(e){
				let index=Number(e.currentTarget.dataset.index);
				if(this.selected[index].index<0){
					return;
				}
				this.$set(this.selectList,this.selected[index].index,this.selected[index].txt);
				this.$set(this.selected,index,{
					txt:"",
					index:-1
				})
			},
			/* 使用帮助 */
			useHelp(){
				/* 当前错误项 */
				let errIndex=this.findIndex();
				/* 正确项位置 */
				let selectIndex=this.selectList.findIndex((item,index)=>{
					if(item==this.idiom.answer.charAt(errIndex)){
						return index;
					}
				})
				/* 当前错误项上已经存在已选值，则将已选值放回选择列表中 */
				if(this.selected[errIndex].index>=0){
					this.$set(this.selectList,this.selected[errIndex].index,this.selected[errIndex].txt);
				}
				this.$set(this.selected,errIndex,{
					txt:this.selectList[selectIndex],
					index:selectIndex
				});
				this.$set(this.selectList,selectIndex,'');
				this.$nextTick(()=>{
					this.verify();
				});				
			},
			/* 分享 */
			share(){
				uni.showModal({
					title:"欢迎体验看图猜成语",
					content:"分享",
					showCancel:false,
					confirmText:"我知道了"
				});
			},
			// 倒计时
			downTime:function(){
				this.cTime = setInterval(()=>{
					if(this.duration>0){
						this.duration -- ;
					}else{
						clearTimeout(this.aTime);
						clearInterval(this.bTime);
						clearInterval(this.cTime);
						if(this.correctCount >= this.idiom_correct){
							var info = uni.getStorageSync("userinfo");
							let timestamp = this.helper.now();
							let sign = this.helper.setSign(['correct='+this.correctCount,'token='+info.token,'timestamp='+timestamp]);
							this.helper.req({
								api:"idiomVerify",
								timestamp:timestamp,
								data:{correct:this.correctCount,token:info.token},
								header:{sign:sign},
								method:'POST',
							}).then(res=>{
								uni.showModal({
									title:"提示",
									content:res.data.message,
									showCancel:false,
									confirmText:"确定",
									success:(e)=>{
										if(e.confirm){
											uni.redirectTo({
												url: '/pages/tasks/index',
											});	
										}
									}
								})
							})
						}else{
							showPop();
						}
					}
				},1000);
				
				let showPop = ()=>{
					uni.showModal({
						title:"游戏结束",
						content:`正确${this.correctCount}条,错误${this.errorCount}条`,
						cancelText:"不玩了",
						confirmText:"重新挑战",
						success:(e)=>{
							if(e.confirm){
								this.restart();
							}
						}
					})
				}
			},
			// 重新开始
			restart(){
				this.passIndex=0;
				this.duration = 60;
				this.correctCount = 0;
				this.errorCount = 0;
				this.downTime();
			},
		}
	}
</script>

<style lang="scss">
page{
    height: 100%
}
.container>uni-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}
.container>uni-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2
}
.container .content_box {
    box-sizing: border-box;
    width: 100%;
    padding: 0 10px 40px 10px
}
.container .img_box {
    padding: 15px 20px;
    border-radius: 8px
}
.container .img_box>uni-image {
    height: 200px;
    width: 100%
}
.container .img_box .btn {
    margin: 10px 50px 0 50px
}
.container .img_box .btn>uni-view {
    line-height: 35px;
    width: 75px;
    text-align: center;
    border-radius: 17px;
    font-size: 15px
}
.container .img_box .btn>uni-view.b1 {
    background-color: #41cf5a
}
.container .img_box .btn>uni-view.b1:active {
    background-color: #4cd565
}
.container .img_box .btn>uni-view.b2 {
    background-color: #ffb047
}
.container .img_box .btn>uni-view.b2:active {
    background-color: #faba63
}
.container .selected_box {
    margin: 20px 50px
}
.container .selected_box>uni-view {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px
}
.container .selected_box>uni-view.item {
    background-color: #fff;
    border-radius: 3px;
    color: #0069b7
}
.container .selected_box>uni-view.reset {
    color: #0069b7
}
.container .select_box {
    margin: 5px 25px 0 25px
}
.container .select_box>uni-view {
    width: 20%;
    line-height: 34px;
    text-align: center;
    margin-bottom: 10px;
    color: #fff
}
.container .select_box>uni-view>uni-view {
    height: 34px;
    width: 34px;
    margin: 0 auto;
    border-radius: 3px
}
.container .select_box>uni-view>uni-view:active {
    background-color: #1e85d7
}
</style>
